<template>
  <div :style="{ width: '100%', height: '100%' }" v-on="$listeners">
    <div
      v-if="isError !== true"
      class="echart"
      :id="controlid"
      :style="{
        float: 'left',
        width: '100%',
        height: '100%',
      }"
    ></div>
    <div v-else class="logmsg">{{ logmsg }}</div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-wordcloud";
import tdTheme from "./theme.json"; // 引入默认主题
import "echarts-gl";
import "echarts-liquidfill/src/liquidFill.js"; //在这里引入
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  props: ["options"],
  data() {
    return {
      mychart: undefined,
      controlid: "",
      optionconfig: {},
      isError: false,
      logmsg: "",
      mapregistecode: "",
    };
  },
  methods: {
    loadmapregistecode() {
      let findResult = kylinjson.kylinjson({
        path: "$..map",
        json: this.options,
      });
      if (findResult != null && findResult.length > 0) {
        this.mapregistecode = findResult[0];
      } else {
        let findResult2 = kylinjson.kylinjson({
          path: "$..mapType",
          json: this.options,
        });
        if (findResult2 != null && findResult2.length > 0) {
          this.mapregistecode = findResult[0];
        }
      }
    },
    initChart() {
      this.loadmapregistecode();
      this.mychart = echarts.init(
        document.getElementById(this.controlid),
        tdTheme
      );
      let app = {};
      this.$emit("loadoptions", this.mychart, echarts, app, this);
      if (this.options !== undefined && this.options !== null) {
        if (
          this.mapcode != this.mapregistecode &&
          echarts.getMap(this.mapcode) != null
        ) {
          echarts.registerMap(
            this.mapregistecode,
            echarts.getMap(this.mapcode)
          );
        }
        this.mychart.clear(); // 每次重绘之前，先清除一下
        this.mychart.setOption(this.options, true);
      }
      const _this = this;
      const erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById(this.controlid), () => {
        _this.$nextTick(() => {
          this.resize();
        });
      });
      this.$emit("initchartafter", this.mychart);
      this.mychart.off("click"); //图表渲染前销毁点击事件
      this.mychart.on("click", (param) => {
        this.$emit("clickechart", param);
      });
      this.mychart.getZr().on("click", (params) => {
        if (!params.target) {
          this.$emit("zrclick", params);
        }
      });
    },
    resize() {
      this.mychart.resize();
    },
    getMychart() {
      return this.mychart;
    },

    loadOption(options) {
      if (this.mychart != null) {
        if (options !== null) {
          if (
            options.series != null &&
            options.series.length > 0 &&
            options.series[0].maskImage != null
          ) {
            var maskResource = new Image();
            maskResource.src = options.series[0].maskImage;
            options.series[0].maskImage = maskResource;
          }
          this.mychart.setOption(options);
        } else {
          this.mychart.setOption({});
        }
      }
    },
  },
  created() {
    this.controlid =
      "div" + Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
    this.$nextTick(() => {
      this.initChart();
    });
  },
  mounted() {},
  watch: {
    options: {
      handler(val) {
        if (this.mychart !== undefined) {
          if (this.options !== undefined) {
            this.mychart.setOption(val, true);
          }
        }
      },
      deep: true,
    },
  },
  beforeDestroy() {
    if (this.mychart) {
      this.mychart.dispose();
    }
  },
};
</script>
<style scoped>
.logmsg {
  color: red;
  font-size: 25px;
}
</style>
